<template>
  <!--路由匹配到的组件内容显示位置，相当于占位符-->
  <router-view />
</template>

<script setup>
import {watch} from 'vue'
import {useRoute} from 'vue-router'
import store from '@/store'
const route=useRoute()

//刷新后根据当前路由添加最新的tab标签
watch(route,(to,from)=>{
  console.log(to.name,to.path)
  if(to.path !== '/login' && to.path !=='/'){
    let obj={
      name:to.name,
      path:to.path
    }
    store.commit('ADD_TABS',obj)
  }
},{deep:true,immediate:true})


const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}
</script>


<style>
  html,body,#app {
    height: 100%;
    margin: 0; /*消除顶部、左右间隙*/
  }
</style>